<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天与数据展示</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 左侧聊天区域 -->
            <div class="chat-section">
                <div class="chat-header">
                    <h2 class="chat-title">聊天助手</h2>
                    <div class="chat-subtitle">智能对话与数据分析</div>
                </div>
                <div class="chat-history">
                    <div v-for="(message, index) in chatHistory" 
                         :key="index" 
                         class="chat-message"
                         :class="message.isUser ? 'user-message' : 'ai-message'">
                        <div :class="['chat-avatar', message.isUser ? 'user-avatar' : 'ai-avatar']">
                            {{ message.isUser ? '我' : 'AI' }}
                        </div>
                        <div class="chat-content">
                            <!-- 专业加载界面 -->
                            <div v-if="!message.isUser && showLoadingMessage && index === chatHistory.length - 1" class="professional-loading">
                                <div class="loading-icon">
                                    <div class="loading-spinner"></div>
                                </div>
                                <div class="loading-text">智能分析中</div>
                                <div class="loading-subtext">正在处理您的请求，分析数据内容...</div>
                                <div class="loading-progress">
                                    <div class="loading-progress-bar"></div>
                                </div>
                                <div class="loading-status">
                                    <div class="status-dot"></div>
                                    <span>{{ loadingStatusText }}</span>
                                </div>
                            </div>
                            <!-- AI生成内容中的动态效果 - 修改显示条件 -->
                            <div v-else-if="shouldShowGeneratingMessage(message, index)" class="ai-generating-content">
                                <div class="generating-icon">
                                    <div class="typing-dots">
                                        <span class="dot"></span>
                                        <span class="dot"></span>
                                        <span class="dot"></span>
                                    </div>
                                </div>
                                <div class="generating-text">AI内容准备中...</div>
                                <div class="generating-subtext">正在分析数据并组织回复内容</div>
                            </div>
                            <!-- 普通消息显示 -->
                            <div class="message-text" v-else v-html="processMessageLinks(message.content)"></div>
                        </div>
                    </div>
                    <div v-if="suggestedQuestions.length > 0" class="suggested-questions">
                        <div class="suggested-questions-title">您可以尝试以下问题：</div>
                        <div class="suggested-questions-list">
                            <div 
                                v-for="(question, index) in suggestedQuestions" 
                                :key="index"
                                class="suggested-question"
                                @click="selectSuggestedQuestion(question)">
                                <i class="el-icon-chat-dot-round"></i>
                                {{ question }}
                            </div>
                        </div>
                    </div>
                    <div v-if="loadingSuggestions" class="suggested-questions">
                        <div class="suggested-questions-title">
                            <i class="el-icon-loading"></i> 正在生成建议问题...
                        </div>
                    </div>
                </div>
                <div class="chat-input">
                    <el-input
                        v-model="inputMessage"
                        placeholder="请输入消息或尝试询问数据相关问题..."
                        :rows="3"
                        type="textarea"
                        @keyup.enter.native="sendMessage">
                    </el-input>
                    
                    <el-button 
                        :type="isGenerating ? 'warning' : 'primary'" 
                        style="margin-top: 10px; width: 100%;"
                        :loading="loading && !isGenerating"
                        @click="sendMessage">
                        {{ isGenerating ? '停止生成' : '发送' }}
                    </el-button>
                    
                    <!-- 新增：DeepSeek 功能控制按钮 -->
                    <!-- <div class="deepseek-controls" style="margin-top: 10px;"> -->
                        <!-- <el-button-group style="width: 100%;">
                            <el-button 
                                type="success" 
                                size="small"
                                style="flex: 1;"
                                :disabled="!dataArray || dataArray.length === 0"
                                :loading="loading && isGenerating"
                                @click="applyDynamicHtml">
                                <i class="el-icon-magic-stick" v-if="!loading || !isGenerating"></i> 
                                {{ loading && isGenerating ? '生成中...' : 'AI生成界面' }}
                            </el-button>
                            <el-button 
                                type="info" 
                                size="small"
                                style="flex: 1;"
                                :disabled="!dataArray || dataArray.length === 0"
                                :loading="loading && isGenerating"
                                @click="generateDataInsights">
                                <i class="el-icon-data-analysis" v-if="!loading || !isGenerating"></i> 
                                {{ loading && isGenerating ? '分析中...' : 'AI分析洞察' }}
                            </el-button>
                        </el-button-group> -->
                        
                        <!-- <el-button-group style="width: 100%; margin-top: 5px;">
                            <el-button 
                                v-if="dynamicHtmlEnabled"
                                type="warning" 
                                size="small"
                                style="flex: 1;"
                                :disabled="loading && isGenerating"
                                @click="resetToDefaultView">
                                <i class="el-icon-refresh"></i> 恢复默认视图
                            </el-button>
                            <el-button 
                                type="info" 
                                size="small"
                                style="flex: 1;"
                                :disabled="loading && isGenerating"
                                @click="showLastMessageRawData">
                                <i class="el-icon-document"></i> 原始数据日志
                            </el-button>
                        </el-button-group> -->
                        
                        <!-- 演示数据按钮
                        <el-button 
                            type="text" 
                            size="mini"
                            style="width: 100%; margin-top: 5px; color: #409EFF;"
                            :disabled="loading && isGenerating"
                            @click="toggleDemoPanel">
                            <i class="el-icon-data-line"></i> 演示数据测试
                        </el-button> -->
                    <!-- </div> -->
                </div>
            </div>

            <!-- 右侧数据展示区域 -->
            <div class="display-section">
                <!-- 动态界面控制面板 -->
                <!-- <div class="display-control-panel" v-if="dataArray && dataArray.length > 0">
                    <div class="control-panel-header">
                        <span class="panel-title">
                            <i class="el-icon-setting"></i> 
                            界面控制
                        </span>
                        <el-switch
                            v-model="dynamicHtmlEnabled"
                            active-text="AI界面"
                            inactive-text="默认界面"
                            :disabled="!generatedHtmlContent"
                            @change="onViewModeChange">
                        </el-switch>
                    </div>
                    <div class="control-panel-actions" v-if="!dynamicHtmlEnabled">
                        <el-tooltip content="使用 DeepSeek AI 根据当前数据生成美观的界面" placement="top">
                            <el-button 
                                type="primary" 
                                size="mini"
                                icon="el-icon-magic-stick"
                                :loading="loading && isGenerating"
                                :disabled="loading && isGenerating"
                                @click="applyDynamicHtml">
                                {{ loading && isGenerating ? '生成中...' : '生成AI界面' }}
                            </el-button>
                        </el-tooltip>
                    </div>
                </div> -->

                <div class="display-header" v-if="dataArray">
                    <h3 class="display-title">{{ inputMessage || projectName ||'数据可视化' }}</h3>
                   
                </div>
                
                <div class="chart-container">
                    <!-- 动态生成的HTML界面 -->
                    <div v-if="dynamicHtmlEnabled && generatedHtmlContent" 
                         class="dynamic-html-container"
                         v-html="generatedHtmlContent">
                    </div>

                    <!-- 原始JSON数据展示 -->
                    <div v-else-if="dataArray" class="data-cards-container">
                        <div class="data-card" v-for="item in dataArray" :key="item">
                            <div class="data-card-header">
                                <div class="data-card-icon icon-blue">
                                    📊
                                </div>
                                <h3 class="data-card-title">{{ item.name }}</h3>
                            </div>
                            <div style="margin-top: 20px;">
                                    <span class="sub-data-label">数据结果</span>
                                    <span class="sub-data-value">{{ typeof item.value === 'object' ? '' : item.value }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态 -->
                    <div v-else class="empty-state">
                        <div class="empty-state-icon">🤖</div>
                        <div class="empty-state-text">DeepSeek AI 数据可视化</div>
                        <div class="empty-state-subtext">
                            发送消息获取数据分析结果，或使用演示数据测试功能
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入演示数据脚本 -->
    <script src="demo-data.js"></script>
    <!-- 引入自定义JavaScript -->
    <script src="app.js"></script>
    
    <script>
        // 添加演示面板切换功能
        if (window.vueApp) {
            window.vueApp.showDemoPanel = false;
            window.vueApp.toggleDemoPanel = function() {
                if (typeof addDemoButtons === 'function') {
                    addDemoButtons();
                } else {
                    this.$message.warning('演示数据功能未加载');
                }
            };
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('=== DeepSeek AI 聊天系统已加载 ===');
            console.log('功能包括：');
            console.log('1. DeepSeek API 集成');
            console.log('2. 动态界面生成');
            console.log('3. 数据分析洞察');
            console.log('4. 演示数据测试');
            console.log('');
            console.log('使用 addDemoButtons() 添加演示测试按钮');
            console.log('使用 testDemoData() 在控制台测试演示数据');
        });
    </script>
</body>
</html>
